---
type: tutorial
title: 開発環境の準備
description: |-
  「初めてのAstroブログ」チュートリアル -
  チュートリアルを完了するために必要なローカル用ツールをインストールする
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - Astroウェブサイトの作成に使用するツールをインストールする
</PreCheck>

## 必要な開発ツールを手に入れる

### ターミナル

Astroプロジェクトを作成し、サイトをビルド、開発、テストするための主要コマンドを実行するために、**コマンドライン（ターミナル）** を使用します。 

コマンドラインは、オペレーティングシステムのローカルターミナルプログラムからアクセスできます。一般的なアプリケーションとしては、**ターミナル**（MacOS/Linux）、**コマンドプロンプト**（Windows）、**Termux**（Android）などがあります。これらのうちの1つは、おそらくすでにあなたのマシンに入っているはずです。

### Node.js

Astroをシステム上で実行するには、バージョン`v18.14.1`以降の[**Node.js**](https://nodejs.org/ja/)をインストールする必要があります。

互換性のあるバージョンがインストール済みかどうかを確認するには、ターミナルで次のコマンドを実行します。

```sh
node -v

// 出力例
v18.14.1
```

コマンドが`v18.14.1`よりも高いバージョン番号を返していれば、問題ありません！

コマンドが`'node'コマンドが見つかりません`のようなエラーメッセージを返すか、バージョン番号が`v18.14.1`よりも低い場合は、[互換性のあるバージョンのNode.jsのインストール](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)が必要です。

### コードエディタ

さらに、コードを書くために**コードエディタ**をダウンロードしてインストールする必要があります。

:::tip[ここで使うのは...]
このチュートリアルでは**VS Code**を使用しますが、お使いのオペレーティングシステムに対応したエディタであれば何でも構いません。
:::

<Steps>
1. [VS Code](https://code.visualstudio.com/#alt-downloads)またはお好みのコードエディタをダウンロードしてインストールしてください。
</Steps>


<Box icon="question-mark">

### 確認テスト

正しいものを選んでください。
1. ファイルやその内容を変更するためのコードエディタはどれですか？

    <MultipleChoice>
      <Option>
        ウェブブラウザ
      </Option>
      <Option>
        ターミナル
      </Option>
      <Option isCorrect>
        VS Code
      </Option>
    </MultipleChoice>

2. リポジトリを保存するための、オンラインのバージョン管理プロバイダーはどれですか？

    <MultipleChoice>
      <Option isCorrect>
        GitHub
      </Option>
      <Option>
        ターミナル
      </Option>
      <Option>
        VS Code
      </Option>
    </MultipleChoice>

3. コマンドを実行するためのアプリケーションはどれですか？
    <MultipleChoice>
      <Option>
        GitHub
      </Option>
      <Option isCorrect>
        ターミナル
      </Option>
      <Option>
        ウェブブラウザ
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">
## 次に進むためのチェックリスト

<Checklist>
- [ ] ターミナルでコマンドラインにアクセスできる。
- [ ] Node.jsをインストールした。
- [ ] VS Codeなどのコードエディタをインストールした。
</Checklist>
</Box>


### 参考

- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge class="neutral-badge" text="外部サイト" /> — HTML、CSS、JSなどのコースや復習教材を無料で提供している教育サイト。</p>
